<template>
  <div class="app-container no-padding chit-look-root">
    <div class="query-container">
      <div class="card-header">
        <span class="title">灾害预警</span>
      </div>
      <div class="card-body">
        <div class="chart" :id="domId"></div>
      </div>
    </div>

    <base-map :buffer-map-config="bufferMapConfig" @mapLoaded="mapLoaded"></base-map>
  </div>
</template>

<script>
import BaseMap from "@/components/BaseMap/index.vue";
import {baseMapMixins} from "@/mixins/baseMapMixins";
import mapConfig from "@/data/forewarningMapConfig.json";
import {pageBaseMapMixins} from "@/mixins/pageBaseMapMixins";
import ChitQuery from "@/views/chitLook/components/chitQuery/index.vue";
import * as echarts from "echarts";
import guid from "@/utils/guid";

export default {
  name: "chitLook",
  mixins: [baseMapMixins, pageBaseMapMixins],
  components: {
    ChitQuery,
    BaseMap
  },
  data() {
    return {
      layerId: 'baodan',
      bufferMapConfig: mapConfig,
      domId: `id_${guid()}`
    }
  },
  methods: {
    initChart() {
      const chartData = [
        {
          label: '1月',
          gw: -10.1,
          dw: -21.7,
          js: 1.3
        },
        {
          label: '2月',
          gw: -4.4,
          dw: -16.7,
          js: 1
        },
        {
          label: '3月',
          gw: 3.8,
          dw: -8.5,
          js: 4
        },
        {
          label: '4月',
          gw: 14.3,
          dw: 1,
          js: 17.2
        },
        {
          label: '5月',
          gw: 22.2,
          dw: 8.8,
          js: 29.7
        },
        {
          label: '6月',
          gw: 27.1,
          dw: 15.2,
          js: 79.2
        },
        {
          label: '7月',
          gw: 28.1,
          dw: 18.2,
          js: 140.1
        },
        {
          label: '8月',
          gw: 27,
          dw: 16.2,
          js: 100.7
        },
      ]
      const markLineData = [
        {
          label: '高温警戒线',
          value: 27.5,
          color: '#f00'
        },
        {
          label: '低温警戒线',
          value: -4,
          color: '#00f'
        }
      ]
      const barChart = echarts.init(document.getElementById(this.domId));
      const option = {
        tooltip: {
          show: true,
          trigger: "item",//axis item
          axisPointer: {
            type: "cross",
            label: {
              backgroundColor: "#6a7985",
            },
          },
          formatter: (params) => {
            if (params.componentType === "series") {
              return params.name + '<br>' + params.marker + ' ' + params.data;
            } else if (params.componentType === "markLine") {
              return params.marker + ' ' + params.data.label.formatter + '：' + params.value;
            }
          }
        },
        legend: {
          show: true,
        },
        grid: {
          left: "2%",
          right: "5%",
          bottom: "5%",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          data: chartData?.map(item => item.label),
          axisLine: {show: false},
          axisLabel: {
            show: true,
          },
          axisTick: {show: false},
        },
        yAxis: [
          {
            type: "value",
            name: "温度/℃",
            nameTextStyle: {
              color: "#666",
              padding: [0, 30, 0, 0],
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: "#979797",
              },
            },
            axisLabel: {
              show: true,
              margin: 25,
            },
          },
          {
            type: "value",
            name: "降水量/mm",
            nameTextStyle: {
              color: "#666",
              padding: [0, 30, 0, 0],
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: "#979797",
              },
            },
            axisLabel: {
              show: true,
              margin: 25,
            },
          }
        ],
        series: [
          {
            name:'最高温',
            type: "line",
            symbolSize: 10,
            data: chartData?.map(item => item.gw),
            lineStyle: {
              color: '#eae213',
            },
            markLine: {
              symbol: "none",
              data: markLineData.map(item => {
                return {
                  yAxis: item.value,
                  name: item.label,
                  label: {
                    formatter: item.label,
                    show: true,
                  },
                  lineStyle: {
                    color: item.color,
                    width: 2,
                  },
                };
              }),
            },
          },
          {
            name:'最低温',
            type: "line",
            symbolSize: 10,
            lineStyle: {
              color: '#4bb2fa',
            },
            data: chartData?.map(item => item.dw),
          },
          {
            name:'降水',
            type: "bar",
            symbolSize: 10,
            yAxisIndex: 1,
            color: '#50eb6a',
            data: chartData?.map(item => item.js),
          },
        ]
      };
      barChart.setOption(option);
    }
  },
  mounted() {
    this.initChart()
  }
}
</script>

<style lang="scss" scoped>
.chit-look-root {
  position: relative;

  .query-container {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 400px;
    height: 400px;
    z-index: 20;
    background-color: #f6fbff;
    border-radius: 2px;

    .card-header {
      height: 48px;
      padding: 0 12px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      position: relative;

      .title {
        font-weight: 600;
        font-size: 18px;
        color: #333333;
      }

      &::before {
        position: absolute;
        top: 50%;
        left: 0;
        transform: translate(0, -50%);
        display: inline-block;
        content: " ";
        width: 0;
        height: 10px;
        border-top: 8px solid transparent;
        border-bottom: 8px solid transparent;
        border-left: 5px solid #098f69;
        box-sizing: content-box;
        // border-right: 10px solid blue;
      }
    }

    .card-body {
      height: calc(100% - 48px);
      padding: 0 9px;

      .chart{
        height: 100%;
        width: 100%;
      }
    }
  }
}
</style>
